本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

not 如其字面意義就是否定的意思，而 :not() 選取器，就是一個排擠(不選取)非我族群的選取器，這個選取器在一開始推出的時候，其實 Amos 非常的不習慣，以往選取物件都是直接想到誰就選誰，從來不以排擠否定方式來選取物件，但是對於一些程式設計師來說，這樣的選取器反到他們覺得很順手，真是讓 Amos 感到汗顏阿。但是仔細想想之後，這個選取器的選取方式在某些特定需求時到也是挺方便的，讓 Amos 舉個例子來看看。

<form>
	<input type="text" id="user_name" class="input_text">
	<input type="password" id="user_password" class="input_text">
	<input type="submit" value="送出">
</form>

上面這份 HTML 中，如果我想要選取到按鈕以外的輸入框的話，我可能需要為前兩個 input 標籤添加 class 或者是使用屬性選取器來選，就像下面這幾種方式

/*選取方式一*/
[type="text"],
[type="password"]{ ...略 }

/*選取方式二*/
.input_text{ ...略 }

/*選取方式三*/
#user_name,
#user_password{ ...略 }

但是如果這兩個 input 都沒有 class 的話該怎麼辦? 我們是否有更簡單的選取方式? 這時否定選取器就派上用場了，我們可以利用否定選取器，去選取「type="submit"」 以外的 input 標籤，像是下面這一段語法

input:not( [type="submit"] ){ ...略 }

學 :not() 選取器要腦袋轉一下

前面那段 CSS 語法，結合了否定選取器以及屬性選取器順便搭配了組合式選取語法， Amos 來解釋一下，該語法翻成白話文的話就是「我要選到 input 標籤，但我不要選到 submit 物件」，來看看下方中文解釋，為了讓大家比較容易對照， Amos 特別多加了空白讓版面比較容易比對，正式撰寫時請自動忽略

要選取的物件:不要選取到的(   要排除的條件   )      { ...略 }
input      :not        ( [type="submit"] )     { ...略 }

上方這樣應該很清楚了，但一定會有人覺得這樣很脫褲子放屁阿，用一個 class 就能夠搞定的事情，為什麼要弄的這麼複雜啦! 恩......老實說....我也覺得(被打)。

你想不到應用的地方是你的問題

這標題下的也太重了....嗎!? 其實 CSS 很多選取器都是為了需求被規劃出來的，所以你用不到不代表別人用不到喔，反倒是應該轉個思維去思考，這個選取器會被規畫並制定出來，究竟是在甚麼情境下有這需求呢? 恩......老實說....我也不知道(再次被打)!

其實在應用上面這個選取器需要轉個彎去思考，或者說你需要多遇到一些不同的情況才能更加理解與熟練，下面 Amos 再分享幾個例子來給各位金魚轉轉腦

選取第一個以外的項目

麵包屑 這種頁面項目，我們經常會在每個項目之間放上區隔用的符號，這時我們就會需要用到排除第一個項目的狀況，在以往的選取方式中，我都會使用 [親代選取器之妹妹選取器與鞭炮串選取器] 來作選取，但是如果換個寫法的話，我們可以改成以下寫法更直覺

li:not(:first-child){ ...略 }

上面語法中有個各位還沒學到的選取器，就是首項選取器 :first-child ，他的作用就是選到第一個項目，所以綜合整段語法的意思就是「我要選到 li 標籤，但是不要選到第一個 li」，這樣的意思可能比起使用加號選取器更加的明確。

選取站外連結的超連結

如果我的部落格文章中，有些文章是連結到站外，而我希望針對這些站外連結添加個說明文字，告知閱覽者這些連結會連結到站外的話，但是因為站外連結的網址可能有各式各樣的開頭，所以我可以轉個彎來這樣思考「我要選到超連結，但是不要選到連到我自家網址的」，這樣的規則就可以讓我寫出下方這樣的選取器了

a:not([href*="csscoke.com" i]){ ...略 }

上面這段語法中如果金魚對i 有疑問的話，建議你去看一下 CSS 屬性選取器 - 一個選取自由度超高的選取器 ，裡面會有詳盡的說明。

選取沒有加註 alt 資訊的圖片

對於 SEO 來說，添加圖片的 alt 屬性是個基本的需求，所以如果希望快速抓出這些圖片並加上醒目的提示的話，像是某些小編不小心粗心大意沒加到，圖片就會出現大紅框來提示小編，多麼貼心的服務阿，且程式設計師就完全不需要增加一個功能了，程式設計師會非常感謝你幫他省時間的，所以我們添加以下選取器就能搞定了

img{
    border: 10px solid red;
}
img:not([alt=""]){
    border: none;
}

把不是特定 class 的項目隱藏

有時候阿，畫面中的物件太多了，這時候我們就會想要選取到某些特定項目，但是其他的就隱藏就好，這種情境很特殊，但也可能會不小心遇到，所以以下 HTML 中， Amos 想要選取到 handsome_amos 的項目

<ul>
	<li class="handsome_amos">Handsome Amos photo</li>
	<li class="kevin">kevin</li>
	<li class="gigi">gigi</li>
	<li class="handsome_amos">Handsome Amos photo</li>
	<li class="cherry">cherry</li>
</ul>

CSS 我們就可以這樣寫，把那些不帥的都隱藏掉

li:not(.handsome_amos){ 
	display: none;
}

看到了吧! 這樣就全部剩下 .handsome_amos 了，世界都是 .handsome_amos 的了!!! (被狂打! )

(從地上爬起，扶正眼鏡) 是的! 以上就是排擠選取器否定選取器的使用方式， Amos 僅舉出一個小小的應用，希望各位喜歡啦

以上就是今天的 金魚都能懂的 CSS 選取器 - :not() 否定選取器 - 一個搞排擠的選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學